import IntegrationTable, {
	IntegrationTableProps,
} from "@/components/IntegrationTable";
import { ProColumns } from "@ant-design/pro-table";
import React, { useEffect, useState } from "react";
import { Card, Tabs, Steps, Statistic, Row, Col, Radio, Button } from "antd";
import { activityCycles } from "./service";
// @page 商家
const Business: React.FC<any> = () => {
	// 组件是否已经卸载
	let isUnMounted = false;

	const [currentActive, setCurrentActive] = useState<any>(0);
	const [radioActive, setRadioActive] = useState<any>(2);
	//活动周期
	const [activityCycle, setActivityCycle] = useState<any>([]);

	const getActivityCycle = async () => {
		const res = await activityCycles();
		console.log(res, "_>>>>>>>>>res");
		// setActivityCycle({
		// 	dayProNumber: res?.data.dayProNumber,
		// 	proNumber: res?.data.proNumber,
		// 	proSum: res?.data.proSum,
		// });
	};
	// 表格项
	const columns: ProColumns[] = [
		{
			title: "日期",
			dataIndex: "time",
			valueType: "dateRange",
			hideInTable: true,
			search: {
				transform: (value: any) => ({
					startTime: value[0],
					endTime: value[1],
				}),
			},
		},
		{
			title: "序号",
			dataIndex: "id",
			search: false,
		},
		{
			title: "合伙人昵称",
			dataIndex: "shopTitle",
		},
		{
			title: "关联小区",
			dataIndex: "community",
		},
		{
			title: "当日成功",
			dataIndex: "shopCert",
			search: false,
		},
		{
			title: "当日失败",
			dataIndex: "createTime",
			search: false,
		},
		{
			title: "累计成功",
			dataIndex: "phone",
			search: false,
		},
		{
			title: "累计失败",
			dataIndex: "phone",
			search: false,
		},
		{
			title: "累计收益",
			dataIndex: "phone",
			search: false,
		},
		{
			title: "已提现金额",
			dataIndex: "phone",
			search: false,
		},
	];

	// 一体化表格props
	const tablePorps: IntegrationTableProps = {
		rowKey: "id",
		scroll: { x: 1000 },
		columns,
		search: false,
		listProps: {
			url: "/shopInfo/list",
		},
		handleOperating: (items: any[]) => [
			{
				type: "modal",
				props: {
					btnText: "详情",
					modalProps: {
						width: 1200,
						footer: false,
						title: "详情",
					},
				},
			},
		],
		tableBefore: () => {
			const { Countdown } = Statistic;
			const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30; // Moment is also OK

			return (
				<div>
					<Card style={{ marginBottom: 20 }}>
						<div style={{ marginBottom: "20" + "px" }}>
							<Button type="primary">添加</Button>
							<Button type="primary" style={{ float: "right" }}>
								编辑
							</Button>
						</div>
						<Steps
							current={currentActive}
							onChange={(current:any) => {
								setCurrentActive(current);
							}}
							type="navigation"
							className="site-navigation-steps"
						>
							<Steps.Step
								title="Finished"
								description="This is a description."
								status="wait"
							/>
							<Steps.Step
								title="Waiting"
								subTitle="Left 00:00:08"
								description="This is a description."
								status="process"
							/>
							<Steps.Step
								title="Waiting"
								description="This is a description."
								status="wait"
							/>
							<Steps.Step
								title="Waiting"
								description="This is a description."
								status="wait"
							/>
							<Steps.Step
								title="Waiting"
								description="This is a description."
								status="wait"
							/>
						</Steps>
					</Card>
					{/* <Card>
						<Tabs
							onChange={(activeKey) => {
								// setPartnerType(activeKey);
								// actionRef.current?.reload();
							}}
						>
							<Tabs.TabPane tab="全部" key=""></Tabs.TabPane>
							<Tabs.TabPane tab="社区推广员" key="20"></Tabs.TabPane>
							<Tabs.TabPane tab="普通推广员" key="10"></Tabs.TabPane>
						</Tabs>
					</Card> */}
					<Card>
						<Row gutter={50}>
							<Col span={8}>
								<Countdown
									title="Countdown"
									value={deadline}
									onFinish={() => {}}
								/>
							</Col>
							<Col span={8}>
								<Countdown
									title="Million Seconds"
									value={deadline}
									format="HH:mm:ss:SSS"
								/>
							</Col>
							<Col span={24} style={{ marginTop: 32 }}>
								<Countdown
									title="Day Level"
									value={deadline}
									format="D 天 H 时 m 分 s 秒"
								/>
							</Col>
							<Col span={8}>
								<Countdown title="Countdown" value={Date.now() + 10 * 1000} />
							</Col>
						</Row>
					</Card>
				</div>
			);
		},
	};

	// 初始化加载数据
	useEffect(() => {
		getActivityCycle();
		return () => {
			isUnMounted = true;
		};
	}, []);

	return <IntegrationTable {...tablePorps} />;
};

export default Business;
